<template>
    <div class="member">
        <div class="columns">
			<div class="column is-one-quarter">
				<!-- 用户简介 -->
				<el-card shadow="never">
					<div slot="header" class="has-text-centered">
						<el-avatar :size="64" :src="`https://cn.gravatar.com/avatar/${user.id}?s=164&d=monsterid`" />
						<p class="mt-3">{{ user.nickname || postAuthor.username }}</p>
					</div>
					<div>
						<p class="content">积分：<code>{{ postAuthor.point }}</code></p>
						<p class="content">入驻：{{ dayjs(postAuthor.createdTime).format("YYYY/MM/DD HH:MM:ss") }}</p>
						<p class="content">简介：{{ postAuthor.intro }}</p>
					</div>
				</el-card>
			</div>

			<!-- 用户发的帖子 -->
			<div class="column">
				<!--用户发布的话题-->
				<el-card class="box-card content" shadow="never">
					<div slot="header" class="has-text-weight-bold">
						<span>帖子</span>
					</div>

					<!-- 若用户所发的帖子数是 0，则显示 "暂无帖子" -->
					<div v-if="posts.length===0">
						暂无帖子
					</div>
					<!-- 否则显示用户帖子列表 -->
					<div v-else class="topicUser-info">
						<article v-for="(post, index) in posts" :key="index" class="media">
							<div class="media-content">
								<div class="content ellipsis is-ellipsis-1">
									<!-- 帖子标题 -->
									<el-tooltip class="item" effect="dark" :content="post.title" placement="top">
										<router-link :to="{ name: 'post-detail', params: { postId: post.id } }">
											{{ post.title }}
										</router-link>
									</el-tooltip>
								</div>
								<nav class="level has-text-grey is-size-7">
									<div class="level-left">
										<!-- 发布时间 -->
										<span class="mr-1">
											发布于:{{ dayjs(post.createTime).format("YYYY/MM/DD HH:mm:ss") }}
										</span>
									</div>
								</nav>
							</div>
							<div v-if="token" class="media-right">
								<div v-if="postAuthor.username === user.username" class="level">
									<!-- 编辑 按钮-->
									<div class="level-item mr-1">			
										<router-link :to="{ name: 'post-edit', params: { postId: post.id}}">
											<span class="tag is-warning">编辑</span>
										</router-link>
									</div>
									<!-- 删除按钮 -->
									<div class="level-item">
										<a @click="handleDelete(post.id)">
											<span class="tag is-danger">删除</span>
										</a>
									</div>
								</div>
							</div>
						</article>
					</div>

					<!--分页-->
					<pagination
						v-show="pageParams.total > 0"
						class="mt-5"
						:total="pageParams.total"
						:page.sync="pageParams.current"
						:limit.sync="pageParams.size"
						@pagination="getUserByUsername"
					/>
				</el-card>
			</div>
        </div>
    </div>
</template>

<script>
import { fetchUserAndPost } from '@/api/user'
import pagination from '@/components/Pagination/index'
import { mapGetters } from 'vuex'
import { deletePostById } from '@/api/post'

export default {
  	name: 'Profile',

  	components: { 
		pagination 
	},

	data() {
		return {
			// 用户信息
			postAuthor: {},

			// 帖子列表
			posts: {},

			// 分页参数
			pageParams: {
				current: 1,
				size: 5,
				total: 0
			}
		}
	},

	computed: {
		...mapGetters([
			'token', 
			'user'
		])
	},

	created() {
		this.getUserByUsername()
	},

	methods: {
		getUserByUsername() {
			fetchUserAndPost(this.$route.params.username, this.pageParams.current, this.pageParams.size).then(response => {
				const { data } = response
				this.postAuthor = data.user
				this.pageParams.current = data.posts.current
				this.pageParams.size = data.posts.size
				this.pageParams.total = data.posts.total
				this.posts = data.posts.records
			})
		},

		handleDelete(postId) {
			deletePostById(postId).then(response => {
				const { code, message } = response
				this.$message.success(message)

				if (code === 200) {
					setTimeout(() => {
						this.$router.push({ path: '/' })
					}, 500)
				}
			})
		}
	}
}
</script>

<style scoped>

</style>
